<template>
  <div style="display: flex;">
    <asideTabs :searchVocDetails="searchVocDetails" :vocId="vocId" :vocNext="vocNext" :path="path"></asideTabs>
    <div class="health">
      <div class="g-main">
        <div class="health-content">
          <div class="health-title">
            <span style=" color: rgba(0, 84, 190, 1);"><span v-html="formatting(vocNext)"></span>{{ searchVocDetails
              }}</span>健康风险信息
          </div>
          <div style="margin-bottom: 20px;" v-loading="loading" element-loading-text="数据加载中"
            element-loading-spinner="el-icon-loading">
            <div>
              <div class="title">非致癌风险</div>
              <div class="second-title">口服暴露单位风险</div>
              <div class="table">
                <el-table :data="Rfd" border stripe style="width: 100%" :header-cell-style="{
      background: '#eef1f6',
      color: 'black',
      padding: '6px',
    }" :cell-style="{ height: '35px', padding: '0' }">
                  <el-table-column prop="rfd" label="口服暴露单位风险值" align="center">
                    <template slot-scope="scope">
                      <div v-html="converting(scope.row.rfd)"></div>
                    </template>
                  </el-table-column>
                  <el-table-column prop="rfdUnit" label="单位" align="center">
                    <template slot-scope="scope">
                      <div v-html="convertToSuperscript(scope.row.rfdUnit)"></div>
                    </template>
                  </el-table-column>
                  <el-table-column prop="toxEffect" label="毒性效应" align="center">
                  </el-table-column>
                  <el-table-column prop="refText" label="数据来源" align="center">
                    <!-- 网站转跳 -->
                    <template slot-scope="scope">
                      <a :href="scope.row.refLink" target="_blank">{{
      scope.row.refText
    }}</a>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
            <div>
              <!-- <div class="title">致癌风险</div> -->
              <div class="second-title">吸入暴露单位风险</div>
              <div class="table">
                <el-table :data="RfC" border stripe style="width: 100%" :header-cell-style="{
      background: '#eef1f6',
      color: 'black',
      padding: '6px',
    }" :cell-style="{ height: '35px', padding: '0' }">
                  <el-table-column prop="rfd" label="吸入暴露单位风险值" align="center">
                    <template slot-scope="scope">
                      <div v-html="converting(scope.row.rfd)"></div>
                    </template>
                  </el-table-column>
                  <el-table-column prop="rfdUnit" label="单位" align="center">
                    <template slot-scope="scope">
                      <div v-html="convertToSuperscript(scope.row.rfdUnit)"></div>
                    </template>
                  </el-table-column>
                  <el-table-column prop="toxEffect" label="毒性效应" align="center">
                  </el-table-column>
                  <el-table-column prop="refText" label="数据来源" align="center">
                    <!-- 网站转跳 -->
                    <template slot-scope="scope">
                      <a :href="scope.row.refLink" target="_blank">{{
      scope.row.refText
    }}</a>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
            <div>
              <div class="title">致癌风险</div>
              <div class="second-title">口服暴露致癌风险</div>
              <div class="table">
                <el-table :data="Rfd2" border stripe style="width: 100%" :header-cell-style="{
      background: '#eef1f6',
      color: 'black',
      padding: '6px',
    }" :cell-style="{ height: '35px', padding: '0' }">
                  <el-table-column prop="rfd" label="口服暴露致癌风险值" align="center">
                    <template slot-scope="scope">
                      <div v-html="converting(scope.row.rfd)"></div>
                    </template>
                  </el-table-column>
                  <el-table-column prop="rfdUnit" label="单位" align="center">
                    <template slot-scope="scope">
                      <div v-html="convertToSuperscript(scope.row.rfdUnit)"></div>
                    </template>
                  </el-table-column>
                  <el-table-column prop="canEffect" label="致癌效应" align="center">
                  </el-table-column>
                  <el-table-column prop="refText" label="数据来源" align="center">
                    <!-- 网站转跳 -->
                    <template slot-scope="scope">
                      <a :href="scope.row.refLink" target="_blank">{{
      scope.row.refText
    }}</a>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
            <div>
              <!-- <div class="title">致癌风险</div> -->
              <div class="second-title">饮用水单位风险</div>
              <div class="table">
                <el-table :data="water" border stripe style="width: 100%" :header-cell-style="{
      background: '#eef1f6',
      color: 'black',
      padding: '6px',
    }" :cell-style="{ height: '35px', padding: '0' }">
                  <el-table-column prop="rfd" label="饮用水单位风险值" align="center">
                    <template slot-scope="scope">
                      <div v-html="converting(scope.row.rfd)"></div>
                    </template>
                  </el-table-column>
                  <el-table-column prop="rfdUnit" label="单位" align="center">
                    <template slot-scope="scope">
                      <div v-html="convertToSuperscript(scope.row.rfdUnit)"></div>
                    </template>
                  </el-table-column>
                  <el-table-column prop="canEffect" label="致癌效应" align="center">
                  </el-table-column>
                  <el-table-column prop="refText" label="数据来源" align="center">
                    <!-- 网站转跳 -->
                    <template slot-scope="scope">
                      <a :href="scope.row.refLink" target="_blank">{{
      scope.row.refText
    }}</a>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
            <div>
              <!-- <div class="title">致癌风险</div> -->
              <div class="second-title">吸入暴露致癌风险</div>
              <div class="table">
                <el-table :data="indraw" border stripe style="width: 100%" :header-cell-style="{
      background: '#eef1f6',
      color: 'black',
      padding: '6px',
    }" :cell-style="{ height: '35px', padding: '0' }">
                  <el-table-column prop="rfd" label="吸入暴露致癌风险值" align="center">
                    <template slot-scope="scope">
                      <div v-html="converting(scope.row.rfd)"></div>
                    </template>
                  </el-table-column>
                  <el-table-column prop="rfdUnit" label="单位" align="center">
                    <template slot-scope="scope">
                      <div v-html="convertToSuperscript(scope.row.rfdUnit)"></div>
                    </template>
                  </el-table-column>
                  <el-table-column prop="canEffect" label="致癌效应" align="center">
                  </el-table-column>
                  <el-table-column prop="refText" label="数据来源" align="center">
                    <!-- 网站转跳 -->
                    <template slot-scope="scope">
                      <a :href="scope.row.refLink" target="_blank">{{
      scope.row.refText
                        }}</a>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
            <!-- <div style="margin-top: 30px">
        <el-button type="text" size="medium">点击查看</el-button>
      </div> -->
          </div>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
import { getCancerData, getNocancerData } from "@/api/publicSearch";
import { formatting, converting, convertToSuperscript } from "@/api/formatVoc";
import asideTabs from "@/components/AsideTabs"
export default {
  name: "healthView",
  components: { asideTabs },
  data() {
    return {
      radio: "",
      radio1: "",
      radio2: "",
      form: {
        type: "",
      },
      // 非致癌-口服暴露单位风险(RfD)
      Rfd: [],
      //非致癌-吸入暴露单位风险
      RfC: [],
      //致癌-口服暴露致癌风险
      Rfd2: [],
      //致癌-饮用水单位风险
      water: [],
      //致癌-吸入暴露致癌风险
      indraw: [],
      carouselData: [],
      voc: "C6H6",
      searchVocDetails: "",
      vocNext: "",
      path: 'health'
    };
  },
  mounted() {
    this.vocId = this.$route.query.vocId;
    this.searchVocDetails = this.$route.query.searchVocDetails;
    this.vocNext = this.$route.query.vocNext;
    this.loading = true;
    getCancerData(this.vocId).then((res) => {
      this.Rfd2 = res.data.data["口服暴露风险"];
      this.indraw = res.data.data["吸入暴露风险"];
      this.water = res.data.data["饮用水单位风险"];
    });
    getNocancerData(this.vocId).then((res) => {
      this.Rfd = res.data.data["口服暴露风险"];
      this.RfC = res.data.data["吸入暴露风险"];
      this.loading = false;
    });
  },
  watch: {},
  methods: {
    //链接中跳转函数
    gotoNewpage(str, radio) {
      let path = str;
      //设置同一个大气和催化反应转换
      this.radio = radio;
      this.$router.push({
        path: path,
        query: {
          searchVocDetails: this.searchVocDetails,
          vocId: this.vocId,
          radio: this.radio,
          vocNext: this.vocNext,
        },
      });
    },
    //格式化处理
    formatting(str) {
      return formatting(str);
    },
    //处理上标
    converting(str) {
      return converting(str);
    },
    //单位上标
    convertToSuperscript(str) {
      return convertToSuperscript(str);
    },
  },
};
</script>

<style scoped lang="scss">
@import "../css/common.scss";

.health {
  width: 90%;

  // margin: 0 auto;
  .health-content {
    margin-left: 0px;
  }

  // height: 100px;
  .health-title {
    text-align: left;
    font-size: #{$first_font_size};
    font-weight: #{$first_font_weight};
    margin-top: #{$first_titile_top}px;
    margin-left: #{$first_titile_left}px;
    margin-bottom: #{$first_titile_bottom}px;
  }

  .title {
    text-align: left;
    font-size: #{$second_font_size};
    font-weight: #{$second_font_weight};
    margin-top: #{$second_titile_top}px;
    margin-left: #{$second_titile_left}px;
    margin-bottom: #{$second_titile_bottom}px;
  }

  .second-title {
    text-align: left;
    font-size: #{$third_font_size};
    font-weight: #{$third_font_weight};
    margin-top: #{$third_titile_top}px;
    margin-left: #{$third_titile_left}px;
    margin-bottom: #{$third_titile_bottom}px;
  }

  .table {
    text-align: left;
    font-size: #{$third_font_size};
    font-weight: #{$third_font_weight};
    margin-top: #{$third_titile_top}px;
    margin-left: #{$third_titile_left}px;
    margin-bottom: #{$third_titile_bottom}px;
  }

  .el-button--medium {
    font-size: 18px;
  }

  .el-table__empty-block {
    max-height: 20px !important;
  }
}

//相关链接
.link-ul li {
  list-style-type: square;
  width: 90%;
  text-align: left;
  color: rgba(0, 84, 190, 1);
  font-size: #{$third_font_size};
  font-weight: #{$third_font_weight};
  margin-top: #{$third_titile_top}px;
  margin-left: #{$third_titile_left}px;
  margin-bottom: #{$third_titile_bottom}px;
  cursor: pointer;
}

.link-title {
  text-align: left;
  font-size: #{$first_font_size};
  font-weight: #{$first_font_weight};
  margin-top: #{$first_titile_top}px;
  margin-left: #{$first_titile_left}px;
  margin-bottom: #{$first_titile_bottom}px;
}

a:visited {
  color: rgba(0, 84, 190, 1);
}

a:link {
  color: rgba(0, 84, 190, 1);
  /* 修改未访问链接的颜色为蓝色 */
  text-decoration: none;
  /* 移除下划线 */
}
</style>
